// webpack配置文件

// 1.引入模块
const path = require('path');//主要用于处理路径
//引入全局模块
const glob = require('glob');
let str = glob.sync('./src/pages/*/*.js');
let entry = {};
str.forEach(function (dir) {
    let chunksName = path.basename(dir, '.js');
    entry[chunksName] = dir;
})
// 处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

//自动化页面
let htmls = glob.sync('./src/pages/*/*.html');
let pages=htmls.map(function (dir) {
    return new HtmlWebpackPlugin({
        template: dir,
        filename:path.basename(dir),
        chunks:[path.basename(dir, '.html')]
    })
})


//2.暴露--五大核心对象
module.exports = {
    //1.entry 入口
    
    entry: entry,  //设置开始打包的入口文件地址
    //2.output 出口
    output: {
        path: path.resolve(__dirname, 'dist'),//配置输出文件的目录,会在根目录下生成一个dist目录--静态资源
        filename: 'js/[name].js',//输出文件的名字,可以自定义
        publicPath: './'//设置静态资源路径,以当前目录为起点
    },
    //3.module  加载器(loader)
    module: {
        rules: [
            //css
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,// 提取css
                        options: {
                            publicPath: '../'// 资源查找路径
                        }
                    },
                    'css-loader'
                ]
            },
            //less
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,// 提取css
                        options: {
                            publicPath: '../'// 资源查找路径
                        }
                    },//把js中的css放到html中的style中
                    'css-loader',//把css以字符串输出到js中
                    'less-loader',// 编译less为css
                ]
            },
            //img加载器--css中的img
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {//配置额外选项--附加项
                    name: '[hash:10].[ext]',// 图片输出的名字hash长度16位 默认32位  ext 后缀名
                    limit: 10 * 1024,// 小于10kb base64处理
                    // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
                    esModule: false,
                    outputPath: 'imgs' // 图片输出文件夹 
                }
            },
            //处理html中的img
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },
            //加载字体
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,// 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //ES6转ES5
            {
                test: /\.js$/,
                loader: 'babel-loader',  // loader 编译es6为es5
                exclude: /node_modules/    // 排除
            }
        ]
    },
    //4.plugins  插件
    plugins: [
        /*
        核心语法:
            new 导入的插件名({
                配置项
            })
        
        */

        //处理html
        // 提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({// 提取css
            filename: 'css/[name].css'// 输出到css文件夹里
        }),

        new OptimizeCssAssetsWebpackPlugin()// 压缩css
    ].concat(pages),
    //5.mode   模式
    mode: process.env.NODE_ENV,

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),// 启动服务器目录
        compress: true,// 启动gzip
        port: 4399,// 端口,值不要低于1000   一台电脑相同的端口只能有一个启动
        open: true,// 自动打开服务
        publicPath: '/',// 静态资源查找路径
        openPage: 'advertisement.html',// 打开的页面
    },
    target: 'web',// 目标是浏览器
}